<template>
  <section class="component lwasuit-follow-execute">
    <el-form label-width="90px" :model="model" :rules="rules" ref="form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="法院" prop="lawsuit">
            <el-input v-model="model.lawsuit" :disabled="isView"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法官" prop="judge">
            <el-input v-model="model.judge" :disabled="isView"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="法官电话" prop="judgePhone">
            <el-input v-model="model.judgePhone" :disabled="isView"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行案件号" prop="executeNumber">
            <el-input v-model="model.executeNumber" :disabled="isView"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="执行立案标的" prop="lawsuitRecord">
            <el-input v-model="model.lawsuitRecord" :disabled="isView"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="跟进人" prop="operatorRealName">
            <el-input v-model="model.operatorRealName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="更新人" prop="updateRealName">
            <el-input v-model="model.updateRealName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="recordRemark">
        <el-input type="textarea" v-model="model.recordRemark" :maxlength="500" :disabled="isView"></el-input>
      </el-form-item>
      <el-form-item label="附件" prop="fileIds">
        <el-button v-if="isView"  @click="dialog.fileList= true">查看附件</el-button>
        <file-upload v-else v-model="model.fileIds" :fileList.sync="fileList" :disabled="isView"></file-upload>
      </el-form-item>
    </el-form>
    <!-- 查看附件 -->
    <el-dialog title="附件信息" :center="true" :visible.sync="dialog.fileList" width="800px" append-to-body>
      <view-attach-list :fileIds="this.viewFileIds?this.viewFileIds:''" @close="dialog.fileList = false"></view-attach-list>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { State } from "vuex-class";
import { Emit, Prop, Watch } from "vue-property-decorator";
import FileUpload from "~/components/common/file-upload.vue";
import { FileUploadService } from "~/services/file-service/file-upload.service";
import ViewAttachList from "~/components/common/view-attach-list.vue";

@Component({
  components: {
    FileUpload,
    ViewAttachList
  }
})
export default class LawsuitFollowExecute extends Vue {
  @Dependencies(FileUploadService)
  private fileUploadService: FileUploadService
  @Prop()
  private isView
  @Prop()
  private follower
  @State
  private userData

  private fileList: any[] = []
  private viewFileIds: any = ''
  private dialog = {
    fileList: false
  }
  private initModel:any = {
    lawsuit: '',
    judge: '',
    judgePhone: '',
    executeNumber: '',
    lawsuitRecord: '',
    updateRealName: '',
    operatorRealName: '',
    recordRemark: '',
  } 

  private model: any = {...this.initModel}

  private rules: any = {
    lawsuit: [{ required: true, message: "请输入法院", trigger: "blur" }],
    judge: [{ required: true, message: "请输入法官", trigger: "blur" }],
    judgePhone: [{ required: true, message: "请输入法官电话", trigger: "blur" }],
    executeNumber: [{ required: true, message: "请输入执行案件号", trigger: "blur" }],
    lawsuitRecord: [{ required: true, message: "请输入执行立案标的", trigger: "blur" }],
    recordRemark: [{ required: true, message: "请输入备注", trigger: "blur" }],
  }

  
   public revertData(data){
       this.model.lawsuit = data.lawsuit
      this.model.judge = data.judge
      this.model.judgePhone = data.judgePhone
      this.model.executeNumber = data.executeNumber
      this.model.lawsuitRecord = data.lawsuitRecord
      this.model.updateRealName = this.userData.realName
      this.model.recordRemark = data.recordRemark
      this.model.operatorRealName = this.follower
      this.viewFileIds = data.recordFileIds
      this.callbackFileList(data.recordFileIds)
  }

    public reset(){
    const form: any = this.$refs['form']
    form.resetFields()
    this.fileList = []
    this.model.operatorRealName = this.follower
    this.model.updateRealName = this.userData.realName
  }


  private async getData() {
    const form: any = this.$refs['form']
    const result =  await form.validate().then(resolve => {
      const tepmFileIds = this.fileList.length === 0 ? "" : this.fileList.map(v => v.response.id).join(",")
      return {...this.model, recordFileIds: tepmFileIds}
    }).catch(rejected => {
      return false
    })
    return result
  }

  private callbackFileList(fileIds: string) {
    if (!fileIds) return 
    this.fileUploadService.getAllUploadFileByIds(fileIds).subscribe(
      data => {
        if (!data || data.length === 0) return
        this.fileList = data.map(v => {
          return {name: v.originalName, response: {id: v.id}}
        })
      }
    )
  }

  
}
</script>

<style lang="less" scoped>
</style>